<template>
  <el-dialog
    :title="title"
    width="40vw"
    :close-on-click-modal="false"
    @close="afterClose"
    @open="beforeOpen"
  >
    <el-form
      v-loading="loading"
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100"
      class="py-16px px-32px"
    >
      <el-form-item label="文件类型" prop="fileType">
        <el-radio-group v-model="formData.fileType" @change="typeChange">
          <el-radio :label="1">网络外链</el-radio>
          <el-radio :label="2">系统文件</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="formData.fileType === 2">
        <el-form-item class="file-form-item">
          <el-button type="primary" @click="chooseFile">选择文件</el-button>
        </el-form-item>
      </template>
      <el-form-item label="文件名称" prop="originalFileName">
        <el-input
          v-model="formData.originalFileName"
          placeholder="请输入文件名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="文件大小" prop="fileSize">
        <el-input
          v-model="formData.fileSize"
          :readonly="formData.fileType === 2"
          placeholder="请输入文件大小"
        ></el-input>
      </el-form-item>
      <el-form-item label="文件路径" prop="url">
        <el-input
          v-model="formData.url"
          :readonly="formData.fileType === 2"
          placeholder="请输入文件路径"
        ></el-input>
      </el-form-item>
      <el-form-item label="文件用途描述" prop="fileDesc">
        <el-input
          v-model="formData.fileDesc"
          placeholder="请输入文件用途描述"
          :maxlength="100"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('close')">取消</el-button>
      <el-button :loading="confirmLoading" type="primary" @click="confirm"
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { getFile, transformSize } from "@/utils/dom";
import { shardUpload } from "@/utils/shardUpload";
import { useLoading } from "@/hooks";

const $api = inject("$api");
const { loading, setLoading } = useLoading();
const { loading: confirmLoading, setLoading: setConfirmLoading } = useLoading();
const props = defineProps({
  id: String,
  elementProvideId: String,
});

const emits = defineEmits(["success", "close"]);

const title = computed(() => (props.id ? "编辑文件" : "新增文件"));

const formRef = ref();
const formData = ref({
  originalFileName: "",
  fileType: null,
  fileSize: "",
  url: "",
});
const rules = reactive({
  originalFileName: [{ required: true, message: "文件名称不能为空" }],
  fileType: [{ required: true, message: "文件类型不能为空" }],
  url: [{ required: true, message: "文件路径不能为空" }],
  fileSize: [{ required: true, message: "文件大小不能为空" }],
});

const getFileDetail = async (id) => {
  setLoading(true);
  try {
    const { data } = await $api.provide.getFileDetail(id);
    formData.value = data;
  } finally {
    setLoading(false);
  }
};

const chooseFile = async () => {
  const file = await getFile("");
  const data = await shardUpload(file);
  if (!data) return;
  const { fileSize, url, name } = data;
  formData.value.url = url;
  formData.value.fileSize = transformSize(fileSize);
  formData.value.originalFileName = name;
};

const beforeOpen = () => {
  if (props.id) getFileDetail(props.id);
};
const afterClose = async () => {
  await nextTick();
  formRef.value.resetFields();
};

const confirm = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    setConfirmLoading(true);
    try {
      const apiName = props.id ? "updateFile" : "addFile";
      await $api.provide[apiName]({
        elementProvideId: props.elementProvideId,
        ...formData.value,
      });
      ElMessage.success("新增成功");
      emits("success");
      emits("close");
    } finally {
      setConfirmLoading(false);
    }
  });
};
</script>
